import { useEffect, useRef, useState } from 'react'

export default function EffectApp() {
    const [isPlaying, setIsPlaying] = useState<boolean>(false)

    return (
    <>
        <button onClick={()=>setIsPlaying(!isPlaying)}>{isPlaying?'暂停':'播放'}</button>
        <VideoPlayer src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4' isPlaying={isPlaying}/>
        <Playground />
    </>
)}

function VideoPlayer({src, isPlaying}:{src: string, isPlaying: boolean}) {

    const ref = useRef<HTMLVideoElement>(null)
    useEffect(()=> {
        console.log('useEffect' + '挂载')
        if (isPlaying) {
            ref.current?.play()
        } else {
            ref.current?.pause()
        }
        return () => {// Effect 中返回一个 清理（cleanup）函数 
            //销毁资源、防止内存泄漏
            console.log('useEffect' + '卸载')
            ref.current?.pause()
        }
    }, [isPlaying])

    /*
    1、渲染结束后需要执行的逻辑
        1.1 主要用于父组件传进来的状态做一些逻辑
    2、[isPlaying] 依赖 isPlaying 变化之后执行逻辑
        2.1 缺少[isPlaying]每次渲染都会执行，渲染之后执行useEffect，useEffect 引起渲染=>容易死循环
        const [count, setCount] = useState(0);
        useEffect(() => {
            setCount(count + 1); // 每次运行都会更新 count，导致无限循环
        }, [count]); // 依赖 count，但又在 useEffect 中更新 count

        2.2 []空依赖数组表示只在组件挂载时运行，如: 网络请求、订阅事件
    */

    return <video ref={ref} src={src} loop playsInline />
}

// function EventApp() {

//     useEffect(()=> {

//         function handleScroll(e: any) {
//             console.log(window.screenX, window.screenY)
//         }
        
//         window.addEventListener('scroll', handleScroll)

//         return () => {// 注册事件必须cleanup
//             window.removeEventListener('scroll', handleScroll)
//         }
//     })
//     return <h1>哈哈哈</h1>
// }

function Playground() {
    const[text, setText] = useState<string>('a')
    // console.time('time start')
    useEffect(() => {
        function onTimeout(){
            console.log('⏰ '+ text)
        }

        console.log('🔵 调度 "' + text + '" 日志')

        const timeoutId = setTimeout(onTimeout, 3000)

        return () => {
            console.log('🟡 取消 "' + text + '" 日志')

            clearTimeout(timeoutId)
        }
    }, [text])
    // console.timeEnd('time end')

    return (
        <div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}>
            <h2>Playground 组件</h2>
            <label>
                日志内容：{' '}
                <input
                    value={text}
                    onChange={e => setText(e.target.value)}
                />
            </label>
            <h1>{text}</h1>
        </div>
    )
}